<template>
	<view class="con-box">
		<view class="">

			<view class="">
				<app-navigation-icon v-if="pageList[2].subnav.length > 0" navHeight="156" navMargin="20rpx auto"
					iconRadius="50%" :navs="pageList[2].subnav" background="#f7f7f7" :scroll="true" columns="5"
					:rows="2">
				</app-navigation-icon>
			</view>

			<view class="">
				<app-navigation-icon nextMargin="108rpx" :autoplay="false" v-if="pageList[4].subnav.length > 0"
					navHeight="298" navMargin="20rpx auto" :navs="pageList[4].subnav" background="#f7f7f7"
					:scroll="true" :columns="3" :imgStyle="imgstyle" :rows="1">
				</app-navigation-icon>
			</view>
			<view class="con-info">
				<view class="info-inner">
					<view class="info-avatar">
						<image src="https://wechatupload.shuangxitang.cn/test/1630899965977124.jpg" mode=""></image>
					</view>
					<view class="info-some">
						<view class="info-name">
							白鸽
						</view>
						<view class="info-set" @click="tososet">
							主页设置 >
						</view>
					</view>
					<view class="" v-if="mchid == 0" @click="tomchlogin">
						登录有发布接龙资格
					</view>
					<view class="" v-else @click="tomchlogout">
						退出登录
					</view>
				</view>
			</view>

			<view class="all-box dir-left-wrap cross-center main-between">
				<view class="cla-item" v-if="isloginmch" @click="jump('/plugins/mch_solitaire/mch/goods/goods')">
					商品库
				</view>
				<view class="cla-item" v-if="isloginmch"
					@click="jump('/plugins/mch_solitaire/mch/goods-cat/goods-cat')">
					<!-- plugins/solitaire/goods/cate -->
					商品分类管理
				</view>
				<view class="cla-item" v-if="isloginmch" @click="jump('/plugins/mch_solitaire/mch/order/order')">
					订单管理
				</view>
				<view class="cla-item" v-if="isloginmch" @click="jump('/plugins/mch_solitaire/writeoff/writeoff')">
					核销管理
				</view>
				<view class="cla-item" v-if="isloginmch" @click="jump('/plugins/mch_solitaire/census/census')">
					统计信息
				</view>
				<view class="cla-item" v-if="isloginmch" @click="jump('/plugins/mch_solitaire/datainfo/analysis')">
					数据分析
				</view>
				<view class="cla-item" v-if="isloginmch" @click="jump('/plugins/mch_solitaire/address/address')">
					提货点
				</view>
				<view class="cla-item">
					参与的接龙
				</view>
				<view class="cla-item" @click="jump('/plugins/mch_solitaire/shop/shop')">
					商品列表
				</view>
			</view>
		</view>
		<view class="rea-btn launch-so" @click="jump('/plugins/mch_solitaire/lasolitaire/lasolitaire?mch_id=1')">
			发起接龙
		</view>
		<view class="">
			<!-- <view class="reatime">
				<view class="text-orange"></view>
				<view class="action">
					2020.02.27
				</view>
			</view> -->
			<view class="rea-solitaire" v-for="(list, index) in lists" :key="index">
				<view class="rea-soitem">
					<view class="publisher">
						<image class="avatar" src="/static/image/icon/order/icon-comment.png" mode=""></image>
						<view class="content">
							<view>{{ list.openid.nickName }}</view>
							<view class="create-time">{{ list.create_time }}</view>
						</view>
					</view>
					<view class="rea-content">
						{{ list.content }}
						<image class="b-image" v-if="list.pic" :src="list.pic" mode="aspectFill"></image>
					</view>

					<view v-if="list.comts.length" class="solitaireor">
						<view class="so-item" v-for="(order, ord_in) in list.comts" :key="ord_in">
							<image class="so-avatar" src="/static/image/icon/order/icon-comment.png" mode=""></image>
							<view class="so-content">
								<view class="">{{ order.openid.nickName }}</view>
								<view class="">+1</view>
							</view>
						</view>
					</view>

					<view v-else class="soli-else">
						一大波人正在赶来...
					</view>

					<view class="rea-btn" @click="solit(list.id)">
						我要接龙
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="">
			<u-popup v-model="show" mode="center" border-radius="14" @close="show = false" v-if="show">
				<view class="dir-right-nowrap" @click="show = false">
					<image style="width: 56rpx;height: 56rpx;transform: rotate(45deg);margin-bottom: 12rpx;"
						src="/static/image/icon/add.png" mode=""></image>
				</view>
				<view class="model" @touchmove.stop.prevent>
					<view class="" style="text-align: center;font-size: 46rpx;">
						进店消费立送满减券
					</view>
					<view class="" style="text-align: center;font-size: 28rpx;">
						进店消费立送满减券
					</view>
					<view class="dir-left-nowrap cross-center"
						style="background-color: #fff;color: #bdbdbd;font-size: 24rpx;box-shadow: 0rpx 0rpx 0rpx 14rpx rgba(0,0,0,.1);border-radius: 4rpx;padding: 36rpx 24rpx;margin-top: 24rpx;">
						<view class=""
							style="background-color: #fa714d;font-size: 24rpx;color: #fff;width: 276rpx;text-align: center;padding: 36rpx 0;">
							<view class="">
								5
							</view>
							<view class="">
								man66可用
							</view>
						</view>
						<view class="" style="width: 228rpx;margin-left: 24rpx;">
							<view class="">
								进店消费立送满减券
							</view>
							<view class="">
								全部商品可用
							</view>
							<view class="">
								领取后多少天有效
							</view>
						</view>
						<view class="" style="align-self: flex-end;">
							×1
						</view>
					</view>
					<view class=""
						style="margin: 36rpx auto 8rpx;padding: 12rpx 24rpx;background-color: #fff;color: #c7b47a;width: 228rpx;text-align: center;border-radius: 64rpx;font-weight: 300;letter-spacing: 5rpx;">
						领取并使用
					</view>
				</view>
			</u-popup>
		</view> -->
		<view class="" :style="{height:botNavHei + 'rpx'}"></view>
		<view class="">
			<sol-tab-bar router="/plugins/mch_solitaire/index/index"></sol-tab-bar>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from "vuex";
	import uPopup from '../../../components/basic-component/u-popup/u-popup.vue';
	import solTabBar from '../components/sol-tab-bar.vue'
	import appSwiper from '../../../components/page-component/app-swiper/app-swiper.vue';
	import appNavigationIcon from '../../../components/page-component/app-navigation-icon/app-navigation-icon.vue';
	export default {
		components: {
			appSwiper,
			appNavigationIcon,
			uPopup,
			solTabBar
		},
		onShareAppMessage() {

		},
		data() {
			return {
				show: true,
				isCard: false,
				isloginmch: false,
				mchid: 0,
				lists: [{
					id: 24,
					openid: {
						id: 2,
						nickName: '你猜',
						avatarUrl: 'https:\/\/thirdwx.qlogo.cn\/mmopen\/vi_32\/flk810QttsrSjYs2Tia3c9DjdicNNWX1OMoLkiaYjesciaNuGs6E34cCzMrlrxoRViaWAURwWphHicOyGRfIibaEkhL0w\/132',
						realname: null,
						tel: null,
						address: '',
					},
					buy_date: 'NULL ',
					pic: 'http://wechatupload.shuangxitang.cn/uploads/mall1/202110/20211022/a41274e192136ac8f2c4ca5f9036db05.png',
					content: '大家好，互助下单，疫情之下，邻里和睦',
					is_send: 1,
					is_master: 0,
					comts: [
						/* {
							id: 33,
							openid: {
								id: 4,
								nickName: '你猜',
								avatarUrl: 'https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/2lZ9GXssnuO2Bhic4KS0FM03iaah67mkldq864ncskg38mlULmNvON2yVgTOm2oMyHFQNYzrrmeUF7Dvl0OBFv2w\/132',
								realname: null,
								tel: null,
								address: '',
							},
							jl_id: '24',
							address: '2。201',
							name: '你猜',
							tel: '',
							order_status: '0',
							des: '快递在小区门口谢谢'
						},
						{
							id: 32,
							openid: {
								id: 2,
								nickName: '你猜',
								avatarUrl: 'https:\/\/thirdwx.qlogo.cn\/mmopen\/vi_32\/flk810QttsrSjYs2Tia3c9DjdicNNWX1OMoLkiaYjesciaNuGs6E34cCzMrlrxoRViaWAURwWphHicOyGRfIibaEkhL0w\/132',
								realname: null,
								tel: null,
							},
							jl_id: '24',
							address: '1-922',
							name: '你猜',
							tel: '',
							order_status: '0',
							des: ''
						} */
					],
					my_orders: [],
					total_orders: 2,
					create_time: '1998-09-01'
				}]
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info
			}),
			...mapGetters('iPhoneX', {
				botNavHei: 'getNavHei',
			})
		},
		onShow() {
			const self = this;
			const mch = uni.getStorageSync('MCHsxt');
			if (!mch) {
				uni.redirectTo({
					url: '/plugins/mch_solitaire/mch/login/login',
				})
				return;
			}
			self.mch_id = mch.mch.id;
			uni.getStorage({
				key: 'MCHsxt',
				success: res => {
					self.isloginmch = true
					self.mchid = res.data.mch.id
					console.log(res, 'res');
				},
				fail: err => {
					self.isloginmch = false
					console.log(err, 'err');
				}
			})
			self.$showLoading({
				title: '登陆中'
			});
			self.$request({
				url: self.$apiSol.mch.manage_index,
				data: {
					mch_id: self.mch_id
				}
			}).then(info => {
				self.$hideLoading();
				if (info.code === 0) {
					const detail = info.data.detail;
					if (detail.status === '0') {
						uni.showModal({
							title: '提示',
							content: '店铺已被关闭！请联系管理员',
							showCancel: false,
							success: function(e) {
								if (e.confirm) {
									uni.redirectTo({
										url: '/plugins/mch_solitaire/mch/login/login',
									})
								}
							}
						});
					}
					self.detail = detail;
				} else {
					uni.redirectTo({
						url: '/plugins/mch_solitaire/mch/login/login',
					})
				}
			});
		},
		onLoad() {
			const self = this;
		},
		methods: {
			jump(url) {
				let aurl = url
				if (aurl.indexOf('?') == -1) {
					aurl = aurl + '?mch_id=' + this.mchid
				} else {
					aurl = aurl + '&mch_id=' + this.mchid
				}
				uni.navigateTo({
					url: aurl
				})
			},
			solit(item) {
				uni.navigateTo({
					url: '/plugins/mch_solitaire/solitaire/solitaire'
				})
			},
			tososet() {
				uni.navigateTo({
					// url: '/plugins/solitaire/setting/setting' + '?mch_id=' + this.mchid
					url: '/plugins/mch_solitaire/mch/config/config' + '?mch_id=' + this.mchid
				})
			},
			tomchlogin() {
				uni.navigateTo({
					url: '/plugins/mch_solitaire/mch/login/login'
				})
			},
			tomchlogout() {
				uni.removeStorage({
					key: 'MCHsxt'
				});
				this.isloginmch = false
				this.mchid = 0
			}
		}
	}
</script>

<style scoped lang="scss">
	.model {
		background-color: #c7b47a;
		color: #FFFFFF;
		padding: 36rpx;
		width: 702rpx;
		border-radius: 14rpx;
		// text-align: center;
	}

	.con-box {
		width: 100%;
		// padding: 0 24rpx;
	}

	.con-info {
		padding: 24rpx;

		.info-inner {
			border-radius: 16rpx;
			background: #FFFFFF;
			padding: 24rpx;
			display: flex;
			align-items: center;

			.info-avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				border: 6rpx solid #f9f9f9;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.info-some {
				margin-left: 32rpx;

				.info-name {
					font-size: 32rpx;
					font-weight: 700;
				}

				.info-set {
					margin-top: 6rpx;
					font-size: 24rpx;
					color: #888888;
				}
			}
		}
	}

	.all-box {
		// width: 702rpx;
		// margin: 0 auto;
		width: 100%;
		padding: 24rpx;
		background-color: #FFFFFF;
		font-size: 28rpx;
		line-height: 80rpx;
		text-align: center;

		.cla-item {
			padding: 0 24rpx;
		}
	}

	.rea-btn {
		text-align: center;
		line-height: 80rpx;
		color: #FFFFFF;
		background-color: #09ba07;
		border-radius: 72rpx;
		margin: 24rpx auto;
	}

	.launch-so {
		// padding: 0 24rpx;
		width: 702rpx;
	}

	.reatime {
		margin-top: 30rpx;
		margin-left: 24rpx;
		display: flex;
		position: relative;
		align-items: center;
		min-height: 100rpx;

		.text-orange {
			display: inline-block;
			background: #f37b1d;
			width: 8rpx;
			height: 28rpx;
		}

		.action {
			margin-left: 30rpx;
			font-size: 30rpx;
			margin-right: 30rpx;
		}
	}

	.rea-solitaire {
		padding: 24rpx;

		.rea-soitem {
			border-radius: 16rpx;
			background: #FFFFFF;
			padding: 24rpx;
		}

		.rea-content {
			font-size: 28rpx;

			.b-image {
				width: 100%;
				height: 200rpx;
			}
		}

		.rea-btn {
			text-align: center;
			line-height: 80rpx;
			color: #FFFFFF;
			background-color: #09ba07;
			border-radius: 72rpx;
			margin: 24rpx auto;
		}

		.publisher {
			display: flex;
			padding-right: 10rpx;
			height: 140rpx;
			background-color: #ffffff;
			align-items: center;

			.avatar {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}

			.content {
				width: calc(100% - 96rpx - 60rpx - 20rpx);
				font-size: 26rpx;
			}

			.create-time {
				font-size: 24rpx;
				color: #aaaaaa;
			}
		}
	}

	.solitaireor {
		font-size: 28rpx;

		.so-item {
			display: flex;
			align-items: center;

			.so-avatar {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
			}

			.so-content {
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				flex: 1;
			}
		}
	}

	.soli-else {
		font-size: 28rpx;
		color: #888888;
		text-align: center;
		line-height: 60rpx;
	}
</style>
